<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://jquery.com/"></script>
		<script>
			var i = 1;
			function funA(){
				var name = $("#name").val();
				var age = $("#age").val();
				var sex = $(":checked").val();
				var str = "<tr id='tr"+i+"'>";
				if(""!=name){
					str+="<td>"+i+"</td>";
					str+="<td>"+name+"</td>";
					str+="<td>"+age+"</td>";
					str+="<td>"+sex+"</td>";
					str+="<td><a href='javascript:funB("+i+")'>删除</a></td>";
					str+="</tr>"
					$("#tbody").append(str);
					i++;
					//reset();
				}
				
			}
			function funB(j){
				var $didi = $("#tr"+j).nextAll();
				$("#tr"+j).remove();
				$didi.each(function(m,obj){
					var $k = $(obj).children().eq(0);
					$k.html(parseInt($k.html())-1);
				});
				i--;
			}
			function reset(){
				$("#name").val("");
				$("#age").val("");
				$("#sex1").attr("checked",true);
			}
		</script>
	</head>
	<body>
		<div align="center">
			<table border="1" width="60%">
				<tr>
					<th>姓名</th>
					<td><input type="text" id="name"/></td>
				</tr>
				<tr>
					<th>年龄</th>
					<td><input type="number" id="age"/></td>
				</tr>
				<tr>
					<th>性别</th>
					<td>
						<input type="radio" name="sex" id="sex1" value="男" checked />男
						<input type="radio" name="sex" id="sex2" value="女" />女
					</td>
				</tr>
				<tr>
					<th colspan="2"><button onclick="funA()">注册</button></th>
				</tr>
			</table>
		</div>
		<table border="1" align="center" width="60%">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tbody"></tbody>
		</table>
	</body>
</html>
